<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 饮食营养管理系统</title>
    <!-- TailwindCSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <!-- Vue.js CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body class="bg-gray-50">
    <div id="app" class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <nav class="bg-emerald-600 text-white shadow-md">
            <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-leaf text-2xl"></i>
                    <span class="text-xl font-bold">营养师后台管理系统</span>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="#" class="hover:text-emerald-200">
                        <i class="fas fa-bell"></i>
                        <span class="bg-red-500 text-white rounded-full w-5 h-5 text-xs flex items-center justify-center absolute -mt-8 ml-3">3</span>
                    </a>
                    <div class="relative group">
                        <div class="flex items-center space-x-2 cursor-pointer">
                            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=150&h=150&q=80" 
                                class="w-8 h-8 rounded-full object-cover" alt="用户头像">
                            <span>管理员</span>
                            <i class="fas fa-chevron-down text-xs"></i>
                        </div>
                        <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden group-hover:block">
                            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-emerald-100">
                                <i class="fas fa-user mr-2"></i>个人信息
                            </a>
                            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-emerald-100">
                                <i class="fas fa-cog mr-2"></i>系统设置
                            </a>
                            <div class="border-t border-gray-200 my-1"></div>
                            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-emerald-100">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主要内容区 -->
        <div class="flex flex-1">
            <!-- 侧边导航 -->
            <aside class="bg-white w-64 shadow-md">
                <div class="p-4">
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                            <i class="fas fa-search text-gray-400"></i>
                        </span>
                        <input type="text" class="pl-10 pr-4 py-2 w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" 
                            placeholder="搜索...">
                    </div>
                </div>
                <nav class="mt-2">
                    <a href="index.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-home mr-3"></i>
                        <span>仪表盘</span>
                    </a>
                    <a href="users.html" class="flex items-center px-4 py-3 text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600">
                        <i class="fas fa-users mr-3"></i>
                        <span>用户管理</span>
                    </a>
                    <a href="foods.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-apple-alt mr-3"></i>
                        <span>食物数据库</span>
                    </a>
                    <a href="recipes.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-utensils mr-3"></i>
                        <span>食谱管理</span>
                    </a>
                    <a href="diet-records.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-clipboard-list mr-3"></i>
                        <span>饮食记录</span>
                    </a>
                    <a href="nutrition.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-chart-pie mr-3"></i>
                        <span>营养分析</span>
                    </a>
                    <a href="settings.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-cog mr-3"></i>
                        <span>系统设置</span>
                    </a>
                </nav>
            </aside>

            <!-- 主内容 -->
            <main class="flex-1 p-6">
                <div class="mb-6 flex justify-between items-center">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-800">用户管理</h1>
                        <p class="text-gray-600">管理系统用户、查看用户统计数据</p>
                    </div>
                    <button id="openAddUserModalBtn" class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md flex items-center">
                        <i class="fas fa-plus mr-2"></i>
                        <span>添加用户</span>
                    </button>
                </div>

                <!-- 数据卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500">总用户数</p>
                                <h3 class="text-3xl font-bold text-gray-800">2,563</h3>
                            </div>
                            <div class="bg-emerald-100 rounded-full w-12 h-12 flex items-center justify-center">
                                <i class="fas fa-users text-emerald-600 text-xl"></i>
                            </div>
                        </div>
                        <p class="mt-4 text-green-600"><i class="fas fa-arrow-up mr-1"></i> 8.2% <span class="text-gray-500">上月</span></p>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500">活跃用户</p>
                                <h3 class="text-3xl font-bold text-gray-800">1,845</h3>
                            </div>
                            <div class="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center">
                                <i class="fas fa-user-check text-blue-600 text-xl"></i>
                            </div>
                        </div>
                        <p class="mt-4 text-green-600"><i class="fas fa-arrow-up mr-1"></i> 4.7% <span class="text-gray-500">上月</span></p>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500">新增用户</p>
                                <h3 class="text-3xl font-bold text-gray-800">327</h3>
                            </div>
                            <div class="bg-purple-100 rounded-full w-12 h-12 flex items-center justify-center">
                                <i class="fas fa-user-plus text-purple-600 text-xl"></i>
                            </div>
                        </div>
                        <p class="mt-4 text-green-600"><i class="fas fa-arrow-up mr-1"></i> 12.4% <span class="text-gray-500">上月</span></p>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500">增长率</p>
                                <h3 class="text-3xl font-bold text-gray-800">14.6%</h3>
                            </div>
                            <div class="bg-amber-100 rounded-full w-12 h-12 flex items-center justify-center">
                                <i class="fas fa-chart-line text-amber-600 text-xl"></i>
                            </div>
                        </div>
                        <p class="mt-4 text-green-600"><i class="fas fa-arrow-up mr-1"></i> 2.8% <span class="text-gray-500">上月</span></p>
                    </div>
                </div>

                <!-- 筛选和搜索 -->
                <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                    <div class="flex flex-wrap gap-4">
                        <div class="relative flex-grow md:max-w-xs">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                                <i class="fas fa-search text-gray-400"></i>
                            </span>
                            <input type="text" class="pl-10 pr-4 py-2 w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" 
                                placeholder="搜索用户...">
                        </div>
                        
                        <div class="flex items-center space-x-4">
                            <select class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                <option value="">所有活动状态</option>
                                <option value="active">活跃用户</option>
                                <option value="inactive">非活跃用户</option>
                            </select>
                            
                            <select class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                <option value="">所有用户角色</option>
                                <option value="user">普通用户</option>
                                <option value="admin">管理员</option>
                            </select>
                            
                            <select class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                <option value="">所有目标</option>
                                <option value="weight_loss">减脂</option>
                                <option value="muscle_gain">增肌</option>
                                <option value="health">健康饮食</option>
                            </select>
                        </div>
                        
                        <button class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md ml-auto">
                            筛选
                        </button>
                    </div>
                </div>

                <!-- 用户表格 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="mr-2 rounded text-emerald-600 focus:ring-emerald-500">
                                        用户信息
                                    </div>
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    身体数据
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    目标
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    注册日期
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    状态
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    操作
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="mr-2 rounded text-emerald-600 focus:ring-emerald-500">
                                        <div class="flex-shrink-0 h-10 w-10">
                                            <img class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&h=100&q=80" alt="">
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-medium text-gray-900">张小红</div>
                                            <div class="text-sm text-gray-500">user123456</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">身高: 165cm</div>
                                    <div class="text-sm text-gray-500">体重: 55kg</div>
                                    <div class="text-sm text-gray-500">年龄: 28</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
                                        减脂
                                    </span>
                                    <div class="text-sm text-gray-500 mt-1">1800 kcal/日</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    2023-01-15
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                        活跃
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <div class="flex space-x-2">
                                        <button class="text-emerald-600 hover:text-emerald-900">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="text-red-600 hover:text-red-900">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                        <button class="text-blue-600 hover:text-blue-900">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="mr-2 rounded text-emerald-600 focus:ring-emerald-500">
                                        <div class="flex-shrink-0 h-10 w-10">
                                            <img class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&h=100&q=80" alt="">
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-medium text-gray-900">李明</div>
                                            <div class="text-sm text-gray-500">user234567</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">身高: 178cm</div>
                                    <div class="text-sm text-gray-500">体重: 75kg</div>
                                    <div class="text-sm text-gray-500">年龄: 32</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                        增肌
                                    </span>
                                    <div class="text-sm text-gray-500 mt-1">2500 kcal/日</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    2023-02-20
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                        活跃
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <div class="flex space-x-2">
                                        <button class="text-emerald-600 hover:text-emerald-900">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="text-red-600 hover:text-red-900">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                        <button class="text-blue-600 hover:text-blue-900">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="mr-2 rounded text-emerald-600 focus:ring-emerald-500">
                                        <div class="flex-shrink-0 h-10 w-10">
                                            <img class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&h=100&q=80" alt="">
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-medium text-gray-900">王芳</div>
                                            <div class="text-sm text-gray-500">user345678</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">身高: 162cm</div>
                                    <div class="text-sm text-gray-500">体重: 52kg</div>
                                    <div class="text-sm text-gray-500">年龄: 25</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                        健康饮食
                                    </span>
                                    <div class="text-sm text-gray-500 mt-1">1950 kcal/日</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    2023-03-05
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                        非活跃
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <div class="flex space-x-2">
                                        <button class="text-emerald-600 hover:text-emerald-900">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="text-red-600 hover:text-red-900">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                        <button class="text-blue-600 hover:text-blue-900">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <!-- 分页 -->
                    <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                        <div class="flex-1 flex justify-between sm:hidden">
                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                上一页
                            </a>
                            <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                下一页
                            </a>
                        </div>
                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700">
                                    显示 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium">2,563</span> 条结果
                                </p>
                            </div>
                            <div>
                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <i class="fas fa-chevron-left"></i>
                                    </a>
                                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-emerald-50 text-sm font-medium text-emerald-600 hover:bg-emerald-50">
                                        1
                                    </a>
                                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        2
                                    </a>
                                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        3
                                    </a>
                                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                                        ...
                                    </span>
                                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        256
                                    </a>
                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <i class="fas fa-chevron-right"></i>
                                    </a>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 添加用户模态框 - 默认隐藏 -->
    <div id="addUserModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50" style="display: none;">
        <div class="bg-white rounded-lg shadow-lg w-full max-w-3xl mx-4 overflow-hidden">
            <!-- 模态框标题 -->
            <div class="bg-emerald-600 text-white px-6 py-4 flex justify-between items-center">
                <h3 class="text-lg font-medium">添加新用户</h3>
                <button id="closeModalBtn" type="button" class="text-white hover:text-gray-200 focus:outline-none">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- 表单内容 -->
            <div class="px-6 py-4 max-h-[80vh] overflow-y-auto">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 基本信息 -->
                    <div>
                        <h4 class="text-md font-medium text-gray-700 mb-4">基本信息</h4>

                        <!-- 用户名 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="username">
                                用户名 <span class="text-red-500">*</span>
                            </label>
                            <input type="text" id="username" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入用户名">
                            <p id="usernameError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 昵称 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="nickname">
                                昵称 <span class="text-red-500">*</span>
                            </label>
                            <input type="text" id="nickname" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入昵称">
                            <p id="nicknameError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 密码 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="password">
                                密码 <span class="text-red-500">*</span>
                            </label>
                            <input type="password" id="password" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入密码">
                            <p id="passwordError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 确认密码 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="confirmPassword">
                                确认密码 <span class="text-red-500">*</span>
                            </label>
                            <input type="password" id="confirmPassword" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请再次输入密码">
                            <p id="confirmPasswordError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 头像选择 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                选择头像
                            </label>
                            <div class="flex space-x-2 mt-2" id="avatarContainer">
                                <!-- 头像选项将由JS动态生成 -->
                            </div>
                            <p class="mt-2 text-xs text-gray-500">点击选择头像或上传自定义头像</p>
                        </div>
                    </div>

                    <!-- 身体信息与目标 -->
                    <div>
                        <h4 class="text-md font-medium text-gray-700 mb-4">身体数据与目标</h4>

                        <!-- 性别 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                性别
                            </label>
                            <div class="flex space-x-4">
                                <label class="inline-flex items-center">
                                    <input type="radio" name="gender" value="男" class="form-radio text-emerald-600 focus:ring-emerald-500" checked>
                                    <span class="ml-2">男</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" name="gender" value="女" class="form-radio text-emerald-600 focus:ring-emerald-500">
                                    <span class="ml-2">女</span>
                                </label>
                            </div>
                        </div>

                        <!-- 身高 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="height">
                                身高 (cm) <span class="text-red-500">*</span>
                            </label>
                            <input type="number" id="height" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入身高">
                            <p id="heightError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 体重 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="weight">
                                体重 (kg) <span class="text-red-500">*</span>
                            </label>
                            <input type="number" id="weight" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入体重">
                            <p id="weightError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 年龄 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="age">
                                年龄 <span class="text-red-500">*</span>
                            </label>
                            <input type="number" id="age" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入年龄">
                            <p id="ageError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 目标 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="goal">
                                饮食目标
                            </label>
                            <select id="goal" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                <option value="减脂">减脂</option>
                                <option value="增肌">增肌</option>
                                <option value="健康饮食">健康饮食</option>
                            </select>
                        </div>

                        <!-- 每日卡路里 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="dailyCalories">
                                每日卡路里 (kcal) <span class="text-red-500">*</span>
                            </label>
                            <input type="number" id="dailyCalories" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入每日卡路里目标">
                            <p id="dailyCaloriesError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 按钮区域 -->
            <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3">
                <button type="button" id="cancelBtn" class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                    取消
                </button>
                <button type="button" id="submitBtn" class="bg-emerald-600 text-white px-4 py-2 rounded-md hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2">
                    添加用户
                </button>
            </div>
        </div>
    </div>

    <!-- 使用原生JavaScript实现功能 -->
    <script>
        // 确保DOM完全加载后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const openModalBtn = document.getElementById('openAddUserModalBtn');
            const modal = document.getElementById('addUserModal');
            const closeModalBtn = document.getElementById('closeModalBtn');
            const cancelBtn = document.getElementById('cancelBtn');
            const submitBtn = document.getElementById('submitBtn');
            const avatarContainer = document.getElementById('avatarContainer');
            
            // 头像选项
            const avatarOptions = [
                'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&h=100&q=80',
                'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&h=100&q=80',
                'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&h=100&q=80',
                'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&h=100&q=80',
                'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&h=100&q=80'
            ];
            
            let selectedAvatar = avatarOptions[0];
            
            // 生成头像选项
            function renderAvatars() {
                avatarContainer.innerHTML = '';
                avatarOptions.forEach((src, index) => {
                    const avatarDiv = document.createElement('div');
                    avatarDiv.className = `w-12 h-12 rounded-full cursor-pointer overflow-hidden border bg-gray-100 ${src === selectedAvatar ? 'ring-2 ring-emerald-500 ring-offset-2' : ''}`;
                    avatarDiv.onclick = function() { selectAvatar(src); };
                    
                    const avatarImg = document.createElement('img');
                    avatarImg.src = src;
                    avatarImg.className = 'w-full h-full object-cover';
                    avatarImg.alt = `头像选项${index+1}`;
                    
                    avatarDiv.appendChild(avatarImg);
                    avatarContainer.appendChild(avatarDiv);
                });
                
                // 添加上传自定义头像选项
                const customAvatarDiv = document.createElement('div');
                customAvatarDiv.className = 'w-12 h-12 rounded-full cursor-pointer overflow-hidden border border-dashed border-gray-300 flex items-center justify-center text-gray-400 hover:text-gray-500';
                
                const plusIcon = document.createElement('i');
                plusIcon.className = 'fas fa-plus';
                
                customAvatarDiv.appendChild(plusIcon);
                avatarContainer.appendChild(customAvatarDiv);
            }
            
            // 选择头像
            function selectAvatar(avatar) {
                selectedAvatar = avatar;
                renderAvatars();
            }
            
            // 打开模态框
            function openModal() {
                console.log('打开模态框');
                resetForm();
                modal.style.display = 'flex';
            }
            
            // 关闭模态框
            function closeModal() {
                console.log('关闭模态框');
                modal.style.display = 'none';
            }
            
            // 重置表单
            function resetForm() {
                // 清空输入字段
                document.getElementById('username').value = '';
                document.getElementById('nickname').value = '';
                document.getElementById('password').value = '';
                document.getElementById('confirmPassword').value = '';
                document.getElementById('height').value = '';
                document.getElementById('weight').value = '';
                document.getElementById('age').value = '';
                document.getElementById('dailyCalories').value = '';
                
                // 重置性别
                document.querySelector('input[name="gender"][value="男"]').checked = true;
                
                // 重置目标
                document.getElementById('goal').value = '减脂';
                
                // 重置头像
                selectedAvatar = avatarOptions[0];
                renderAvatars();
                
                // 隐藏所有错误信息
                const errorElements = document.querySelectorAll('[id$="Error"]');
                errorElements.forEach(el => el.style.display = 'none');
            }
            
            // 验证表单
            function validateForm() {
                let isValid = true;
                
                // 隐藏所有错误信息
                const errorElements = document.querySelectorAll('[id$="Error"]');
                errorElements.forEach(el => el.style.display = 'none');
                
                // 验证用户名
                const username = document.getElementById('username').value.trim();
                if (!username) {
                    document.getElementById('usernameError').textContent = '请输入用户名';
                    document.getElementById('usernameError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证昵称
                const nickname = document.getElementById('nickname').value.trim();
                if (!nickname) {
                    document.getElementById('nicknameError').textContent = '请输入昵称';
                    document.getElementById('nicknameError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证密码
                const password = document.getElementById('password').value;
                if (!password) {
                    document.getElementById('passwordError').textContent = '请输入密码';
                    document.getElementById('passwordError').style.display = 'block';
                    isValid = false;
                } else if (password.length < 6) {
                    document.getElementById('passwordError').textContent = '密码长度至少为6位';
                    document.getElementById('passwordError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证确认密码
                const confirmPassword = document.getElementById('confirmPassword').value;
                if (password !== confirmPassword) {
                    document.getElementById('confirmPasswordError').textContent = '两次输入的密码不一致';
                    document.getElementById('confirmPasswordError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证身高
                const height = document.getElementById('height').value;
                if (!height) {
                    document.getElementById('heightError').textContent = '请输入身高';
                    document.getElementById('heightError').style.display = 'block';
                    isValid = false;
                } else if (isNaN(height) || height <= 0) {
                    document.getElementById('heightError').textContent = '请输入有效的身高数值';
                    document.getElementById('heightError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证体重
                const weight = document.getElementById('weight').value;
                if (!weight) {
                    document.getElementById('weightError').textContent = '请输入体重';
                    document.getElementById('weightError').style.display = 'block';
                    isValid = false;
                } else if (isNaN(weight) || weight <= 0) {
                    document.getElementById('weightError').textContent = '请输入有效的体重数值';
                    document.getElementById('weightError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证年龄
                const age = document.getElementById('age').value;
                if (!age) {
                    document.getElementById('ageError').textContent = '请输入年龄';
                    document.getElementById('ageError').style.display = 'block';
                    isValid = false;
                } else if (isNaN(age) || age <= 0) {
                    document.getElementById('ageError').textContent = '请输入有效的年龄数值';
                    document.getElementById('ageError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证每日卡路里
                const dailyCalories = document.getElementById('dailyCalories').value;
                if (!dailyCalories) {
                    document.getElementById('dailyCaloriesError').textContent = '请输入每日卡路里';
                    document.getElementById('dailyCaloriesError').style.display = 'block';
                    isValid = false;
                } else if (isNaN(dailyCalories) || dailyCalories <= 0) {
                    document.getElementById('dailyCaloriesError').textContent = '请输入有效的卡路里数值';
                    document.getElementById('dailyCaloriesError').style.display = 'block';
                    isValid = false;
                }
                
                return isValid;
            }
            
            // 提交表单
            function submitForm() {
                if (validateForm()) {
                    // 这里应该发送请求到服务器添加用户
                    // 收集表单数据
                    const formData = {
                        username: document.getElementById('username').value.trim(),
                        nickname: document.getElementById('nickname').value.trim(),
                        password: document.getElementById('password').value,
                        gender: document.querySelector('input[name="gender"]:checked').value,
                        height: document.getElementById('height').value,
                        weight: document.getElementById('weight').value,
                        age: document.getElementById('age').value,
                        goal: document.getElementById('goal').value,
                        dailyCalories: document.getElementById('dailyCalories').value,
                        avatar: selectedAvatar
                    };
                    
                    console.log('表单数据：', formData);
                    // 模拟添加成功
                    alert('用户添加成功！');
                    closeModal();
                }
            }
            
            // 事件监听
            openModalBtn.addEventListener('click', openModal);
            closeModalBtn.addEventListener('click', closeModal);
            cancelBtn.addEventListener('click', closeModal);
            submitBtn.addEventListener('click', submitForm);
            
            // 初始化头像选项
            renderAvatars();
            
            // 确保模态框初始为隐藏状态
            modal.style.display = 'none';
        });
    </script>
</body>
</html> 